<template>
  <div class="warp">
    <h3 class="text-center">职位管理</h3>
    <el-button type="primary" style="width: 120px; height: 40px" @click="dialogFormVisible = true"
      >+添加职位</el-button
    >
    <!-- 选择类型 -->
    <div
      class="box"
      style="width: 1500px; height: 700px; border-radius: 20px; background-color: #fff"
    >
      <div class="titleBox">
        <el-form :model="form" label-width="auto" style="max-width: 1400px">
          <p>部门</p>
          <el-form-item>
            <el-select v-model="form.region1" placeholder="全部" style="width: 100%">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <p>级别</p>
          <el-form-item>
            <el-select v-model="form.region2" placeholder="全部">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <p>状态</p>
          <el-form-item>
            <el-select v-model="form.region3" placeholder="全部">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <p>搜索职位</p>
          <el-form-item>
            <el-input v-model="form.name" placeholder="输入职位名称..." />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit1" style="width: 100px; height: 50px"
              >筛选</el-button
            >
            <el-button style="width: 100px; height: 50px">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 数据列表 -->
    <div
      class="box2"
      style="
        width: 1460px;
        height: 700px;
        border-radius: 20px;
        background-color: #fff;
        margin-top: 30px;
        padding: 20px;
      "
    >
      <h1 style="font-size: 30px; border-bottom: 1px solid #ccc; height: 60px">职位列表</h1>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="username" label="职位名称" width="180" />
        <el-table-column prop="division" label="部门" width="180" />
        <el-table-column prop="technology" label="技术" width="240" />
        <el-table-column prop="grade" label="级别" width="180" />
        <el-table-column prop="num" label="人数" width="180" />
        <el-table-column prop="status" label="状态" width="180" />
        <!-- 操作 -->
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" :icon="Search" circle />
            <el-button type="success" :icon="Edit" circle />
            <el-button
              type="danger"
              :icon="Delete"
              @click="handleDelete(scope.$index, scope.row)"
              circle
            />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="100" />
    </div>
    <!-- 弹窗 -->
    <el-dialog v-model="dialogFormVisible" title="添加职位" width="900">
      <el-form :model="ruleForm">
        <!-- 1 -->
        <el-form-item prop="name">
          <div>职位名称</div>
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <!-- 2 -->
        <el-form-item prop="count">
          <div>所属部门</div>
          <el-select-v2 v-model="ruleForm.count" placeholder="Activity count" :options="options" />
        </el-form-item>
        <!-- 3 -->
        <el-form-item prop="count">
          <div>职位级别</div>
          <el-select-v2 v-model="ruleForm.count" placeholder="Activity count" :options="options" />
        </el-form-item>
        <!-- 4 -->
        <el-form-item prop="desc">
          <div>职位描述</div>
          <el-input v-model="ruleForm.desc" type="textarea" />
        </el-form-item>
        <!-- 5 -->
        <el-form-item prop="desc">
          <div>任职要求</div>
          <el-input v-model="ruleForm.desc" type="textarea" />
        </el-form-item>
        <!-- 6 -->
        <el-form-item prop="name">
          <div>所需要求</div>
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <!-- 7 -->
        <el-form-item>
          <template style="display: flex">
            <div>
              <div>状态</div>
              <el-select v-model="value" placeholder="Select" size="large" style="width: 240px">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div>
              <div>招聘人数</div>
              <el-input
                v-model="value"
                placeholder="请输入内容"
                size="large"
                style="width: 240px"
              />
            </div>
          </template>
        </el-form-item>

        <!-- 9 -->
        <el-form-item prop="desc">
          <div>备注（可选）</div>
          <el-input v-model="ruleForm.desc" type="textarea" />
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm()"> Create </el-button>
          <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
//引icnon
import { Delete, Edit, Search } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import ElementPlus from 'element-plus'
import { getManagementList } from '@/api/getManagements'
// 选择类型
const form = ref({
  region1: '',
  region2: '',
  region3: '',
  name: '',
})
//点击筛选
const onSubmit1 = () => {
  console.log('submit!')
}

// 表格数据
//表格类型
interface User {
  username: string //职位名称
  division: string //部门
  technology: string //技术
  grade: string //级别
  num: string //招聘人数
  status: string //状态
  title?: string //备注
}

const handleEdit = (index: number, row: User) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
  console.log(index, row)
}

const tableData = ref()

//掉接口
const getManagementLists = async () => {
  const res = await getManagementList()
  console.log('11111111111111111', res)
  tableData.value = res.data
}
// 弹窗

const dialogFormVisible = ref(false)

// const tanchForm = ref({
//   username: '', //职位名称
//   division: '', //部门
//   technology: '', //技术
//   grade: '', //级别
//   num: '', //招聘人数
//   status: '', //状态
//   title: '', //备注
// })

//状态

interface RuleForm {
  name: string
  region: string
  count: string
  date1: string
  date2: string
  delivery: boolean
  location: string
  type: string[]
  resource: string
  desc: string
}

const ruleFormRef = ref()
const ruleForm = ref<RuleForm>({
  name: 'Hello',
  region: '',
  count: '',
  date1: '',
  date2: '',
  delivery: false,
  location: '',
  type: [],
  resource: '',
  desc: '',
})

const rules = ref({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  count: [
    {
      required: true,
      message: 'Please select Activity count',
      trigger: 'change',
    },
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  location: [
    {
      required: true,
      message: 'Please select a location',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
  desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
})

const submitForm = () => {}

const value = ref('')
const options = ref([
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
])
onMounted(() => {
  getManagementLists()
})
</script>

<style scoped>
.warp {
  width: 100%;
  height: 100%;
  background-color: #eee;
  padding: 20px;
}
.text-center {
  font-size: 40px;
}
.titleBox {
  padding: 28px;
}

.titleBox p {
  font-size: 20px;
}
</style>
